<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { updateUserStats } from '../services/UserService.js'
import { getStorage, setStorage } from '../utils/storage.js'
import { showTemporaryMessage } from '../utils/uiUtils.js'

const router = useRouter()
const username = ref('')
const currentGame = ref('') // 'reaction' 或 'aim'
const gameState = ref('ready') // 'ready', 'waiting', 'playing', 'result'

// 反应测试游戏变量
const reactionStartTime = ref(0)
const reactionEndTime = ref(0)
const reactionTime = ref(0)
const reactionBackground = ref('#667eea')
const reactionRandomDelay = ref(0)
const reactionTimer = ref(null)
const showEarlyClickAlert = ref(false) // 控制自定义提示显示

// 瞄准练习游戏变量
const score = ref(0)
const balls = ref([])
const ballSize = ref(40)
const maxBalls = ref(3)
const ballTimer = ref(null)
const gameTimer = ref(null)
const remainingTime = ref(60) // 60秒倒计时
const aimDifficulty = ref('normal') // 瞄准练习难度等级
const highScores = ref([]) // 排行榜数据

onMounted(() => {
  // 检查登录状态
  const loggedIn = getStorage('isLoggedIn') === 'true'
  if (!loggedIn) {
    router.push('/login')
  } else {
    // 获取用户名
    username.value = getStorage('username') || '玩家'
  }
  
  // 加载历史最高分数
  loadHighScores()
})

onUnmounted(() => {
  // 清理定时器
  if (reactionTimer.value) {
    clearTimeout(reactionTimer.value)
  }
  if (ballTimer.value) {
    clearInterval(ballTimer.value)
  }
})

// 保存最高分到本地存储
const saveHighScore = (gameType, scoreValue, reactionTimeValue = null) => {
  try {
    const allHighScores = getStorage('highScores', [])
    const newScore = {
      username: username.value,
      gameType,
      score: scoreValue,
      reactionTime: reactionTimeValue,
      date: new Date().toISOString()
    }
    
    // 添加新分数
    allHighScores.push(newScore)
    // 保存到本地存储
    setStorage('highScores', allHighScores)
    // 重新加载排行榜
    loadHighScores()
  } catch (error) {
    console.error('保存最高分失败:', error)
  }
}

// 选择游戏
const selectGame = (gameType) => {
  currentGame.value = gameType
  gameState.value = 'ready'
  
  // 重置游戏状态
  if (gameType === 'reaction') {
    reactionTime.value = 0
    reactionBackground.value = '#667eea'
    if (reactionTimer.value) {
      clearTimeout(reactionTimer.value)
    }
  } else if (gameType === 'aim') {
    score.value = 0
    balls.value = []
    if (ballTimer.value) {
      clearInterval(ballTimer.value)
    }
  }
}

// 开始反应测试
const startReactionTest = () => {
  gameState.value = 'waiting'
  reactionBackground.value = '#667eea' // 初始蓝色
  
  // 随机延迟1-5秒
  reactionRandomDelay.value = Math.floor(Math.random() * 4000) + 1000
  
  reactionTimer.value = setTimeout(() => {
    // 改变背景色并开始计时
    reactionBackground.value = '#ff6b6b' // 变红
    reactionStartTime.value = Date.now()
    gameState.value = 'playing'
  }, reactionRandomDelay.value)
}

// 点击反应测试区域
const clickReactionArea = () => {
  if (gameState.value === 'playing') {
    // 结束计时
    reactionEndTime.value = Date.now()
    reactionTime.value = reactionEndTime.value - reactionStartTime.value
    gameState.value = 'result'
    
    // 更新用户统计数据
    updateUserStats(username.value, 'reaction', null, reactionTime.value)
    
    // 保存最高分到排行榜（反应时间越短越好，所以使用负值来排序）
    saveHighScore('reaction', -reactionTime.value, reactionTime.value)
    
    // 显示结果提示
    showTemporaryMessage(`反应时间: ${reactionTime.value}ms`, (msg) => {
      console.log(msg)
    })
  } else if (gameState.value === 'waiting') {
    // 过早点击
    if (reactionTimer.value) {
      clearTimeout(reactionTimer.value)
    }
    gameState.value = 'ready'
    // 显示临时提示消息
    showTemporaryMessage('太早了！请等待屏幕变色后再点击。', 2000)
  }
}

// 开始瞄准练习
const startAimPractice = async (difficulty = aimDifficulty.value) => {
  gameState.value = 'playing'
  score.value = 0
  balls.value = []
  remainingTime.value = 60
  aimDifficulty.value = difficulty
  
  // 根据难度设置不同的参数
  switch(difficulty) {
    case 'easy':
      maxBalls.value = 2
      ballSize.value = 50 // 简单难度：球更大
      break
    case 'normal':
      maxBalls.value = 3
      ballSize.value = 40 // 普通难度：标准大小
      break
    case 'hard':
      maxBalls.value = 4
      ballSize.value = 30 // 困难难度：球更小
      break
    case 'ultimate':
      maxBalls.value = 5
      ballSize.value = 25 // 终极难度：球最小
      break
  }
  
  // 等待DOM更新后再生成小球
  await nextTick()
  
  // 初始生成对应数量的球
  generateBalls(maxBalls.value)
  
  // 根据难度设置不同的添加新球间隔
  const interval = difficulty === 'ultimate' ? 3000 : 5000
  ballTimer.value = setInterval(() => {
    if (balls.value.length < maxBalls.value) {
      generateBalls(1)
    }
  }, interval)
  
  // 开始一分钟倒计时
  gameTimer.value = setInterval(() => {
    remainingTime.value--
    if (remainingTime.value <= 0) {
      endAimPractice()
    }
  }, 1000)
}

// 生成球
const generateBalls = (count) => {
  for (let i = 0; i < count; i++) {
    // 获取瞄准区域的尺寸
    const aimingArea = document.querySelector('.aiming-area');
    if (!aimingArea) return; // 如果区域不存在则退出
    
    // 根据球的大小调整可用区域
    const margin = ballSize.value / 2;
    const areaWidth = aimingArea.clientWidth - ballSize.value;
    const areaHeight = aimingArea.clientHeight - ballSize.value;
    
    // 随机位置（确保球完全在瞄准区域内）
    const left = Math.floor(Math.random() * areaWidth) + margin;
    const top = Math.floor(Math.random() * areaHeight) + margin;
    
    // 随机颜色
    const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff']
    const color = colors[Math.floor(Math.random() * colors.length)]
    
    // 添加球
    balls.value.push({
      id: Date.now() + i,
      left,
      top,
      color,
      size: ballSize.value // 存储球的大小
    })
  }
}

// 点击球
const clickBall = (ballId, event) => {
  event.stopPropagation()
  
  // 移除被点击的球
  balls.value = balls.value.filter(ball => ball.id !== ballId)
  
  // 加分
  score.value++
  
  // 立即生成新球，不再延迟
  if (gameState.value === 'playing' && balls.value.length < maxBalls.value) {
    generateBalls(1)
  }
}

// 结束瞄准练习
const endAimPractice = () => {
  gameState.value = 'result'
  if (ballTimer.value) {
    clearInterval(ballTimer.value)
  }
  if (gameTimer.value) {
    clearInterval(gameTimer.value)
  }
  
  // 保存到排行榜
  saveToHighScore()
  // 加载排行榜
  loadHighScores()
  
  // 更新用户统计数据
  updateUserStats(username.value, 'aim', score.value)
}

// 保存分数到排行榜
const saveToHighScore = () => {
  // 获取现有的排行榜数据
  const existingScores = JSON.parse(getStorage(`highScores_${aimDifficulty.value}`) || '[]')
  
  // 添加新分数
  const newScore = {
    username: username.value,
    score: score.value,
    date: new Date().toLocaleString()
  }
  
  existingScores.push(newScore)
  
  // 按分数排序，取前10名
  existingScores.sort((a, b) => b.score - a.score)
  const topScores = existingScores.slice(0, 10)
  
  // 保存到本地存储
  setStorage(`highScores_${aimDifficulty.value}`, JSON.stringify(topScores))
}

// 加载排行榜
const loadHighScores = () => {
  try {
    // 加载特定难度的瞄准游戏分数
    const aimScores = JSON.parse(getStorage(`highScores_${aimDifficulty.value}`) || '[]')
    // 同时加载全局排行榜分数
    const globalScores = getStorage('highScores', [])
    // 合并并去重
    const allScores = [...aimScores, ...globalScores]
    // 按分数降序排序
    allScores.sort((a, b) => b.score - a.score)
    // 只显示前10名
    highScores.value = allScores.slice(0, 10)
  } catch (error) {
    console.error('加载最高分失败:', error)
    highScores.value = []
  }
}

// 返回游戏选择
const backToMenu = () => {
  currentGame.value = ''
  gameState.value = 'ready'
  
  // 清理定时器
  if (reactionTimer.value) {
    clearTimeout(reactionTimer.value)
  }
  if (ballTimer.value) {
    clearInterval(ballTimer.value)
  }
  if (gameTimer.value) {
    clearInterval(gameTimer.value)
  }
}

// 导航到个人主页
const goToProfile = () => {
  router.push('/profile')
}

// 获取难度名称
const getDifficultyName = (difficulty) => {
  const names = {
    easy: '简单',
    normal: '普通',
    hard: '困难',
    ultimate: '终极目标'
  }
  return names[difficulty] || difficulty
}
</script>

<template>
  <div class="games-container">
    <div class="games-header">
      <h1>游戏乐园</h1>
      <div class="header-actions">
        <p class="welcome-message">欢迎回来，{{ username }}！</p>
        <button class="profile-button" @click="goToProfile">个人主页</button>
      </div>
    </div>
    
    <!-- 游戏选择界面 -->
    <div v-if="!currentGame" class="games-menu">
      <div class="game-selection">
        <div class="game-option" @click="selectGame('reaction')">
          <h2>反应测试</h2>
          <p>屏幕变色开始计时，鼠标点下计时结束</p>
        </div>
        <div class="game-option" @click="selectGame('aim')">
          <h2>瞄准练习</h2>
          <p>点击出现的小球，击碎它们获得分数</p>
        </div>
      </div>
    </div>
    
    <!-- 反应测试游戏 -->
    <div v-else-if="currentGame === 'reaction'" class="game-screen">
      <div class="game-header">
        <h2>反应测试</h2>
        <button class="back-button" @click="backToMenu">返回</button>
      </div>
      
      <div class="reaction-test-area">
        <!-- 准备状态 -->
        <div v-if="gameState === 'ready'" class="game-instructions">
          <h3>准备好了吗？</h3>
          <p>点击"开始游戏"按钮后，请等待屏幕变色，然后尽快点击屏幕。</p>
          <button class="start-button" @click="startReactionTest">开始游戏</button>
        </div>
        
        <!-- 等待状态 -->
        <div v-else-if="gameState === 'waiting'" class="waiting-state" @click="clickReactionArea">
          <h3>请等待...</h3>
          <p>不要提前点击！</p>
        </div>
        
        <!-- 游戏进行中 -->
        <div 
          v-else-if="gameState === 'playing'" 
          class="reaction-area" 
          :style="{ backgroundColor: reactionBackground }" 
          @click="clickReactionArea"
        >
          <p>立即点击！</p>
        </div>
        
        <!-- 游戏结果 -->
        <div v-else-if="gameState === 'result'" class="game-result">
          <h3>你的反应时间</h3>
          <p class="reaction-time">{{ reactionTime }} 毫秒</p>
          <div class="reaction-rating">
            <span v-if="reactionTime < 200">非常快！</span>
            <span v-else-if="reactionTime < 400">很快！</span>
            <span v-else-if="reactionTime < 600">不错！</span>
            <span v-else>继续练习！</span>
          </div>
          <button class="play-again-button" @click="startReactionTest">再玩一次</button>
        </div>
      </div>
      
      <!-- 自定义过早点击提示 -->
      <div v-if="showEarlyClickAlert" class="custom-alert">
        <div class="alert-content">
          <div class="alert-icon">⚠️</div>
          <div class="alert-text">太早了！请等待屏幕变色后再点击。</div>
        </div>
      </div>
    </div>
    
    <!-- 瞄准练习游戏 -->
    <div v-else-if="currentGame === 'aim'" class="game-screen">
      <div class="game-header">
        <h2>瞄准练习</h2>
        <div class="game-info">
          <div class="score-display">分数: {{ score }}</div>
          <div class="timer-display" v-if="gameState === 'playing'">时间: {{ remainingTime }}s</div>
        </div>
        <button class="back-button" @click="backToMenu">返回</button>
      </div>
      
      <div class="aim-practice-area">
        <!-- 准备状态 -->
        <div v-if="gameState === 'ready'" class="game-instructions">
          <h3>选择难度</h3>
          <p>点击下方按钮选择游戏难度：</p>
          <div class="difficulty-selection">
            <button class="difficulty-button" @click="startAimPractice('easy')">简单</button>
            <button class="difficulty-button" @click="startAimPractice('normal')">普通</button>
            <button class="difficulty-button" @click="startAimPractice('hard')">困难</button>
            <button class="difficulty-button ultimate" @click="startAimPractice('ultimate')">终极目标</button>
          </div>
        </div>
        
        <!-- 游戏进行中 -->
        <div v-else-if="gameState === 'playing'" class="aiming-area">
          <!-- 球元素 -->
          <div 
            v-for="ball in balls" 
            :key="ball.id" 
            class="ball" 
            :style="{ 
              left: ball.left + 'px', 
              top: ball.top + 'px', 
              backgroundColor: ball.color, 
              width: ball.size + 'px',
              height: ball.size + 'px'
            }" 
            @click="clickBall(ball.id, $event)"
          ></div>
        </div>
        
        <!-- 游戏结果 -->
        <div v-else-if="gameState === 'result'" class="game-result">
          <h3>游戏结束</h3>
          <p class="final-score">最终分数: {{ score }}</p>
          <div class="score-rating">
            <span v-if="score >= 20">神枪手！</span>
            <span v-else-if="score >= 10">不错的瞄准！</span>
            <span v-else>继续练习！</span>
          </div>
          
          <!-- 排行榜 -->
            <div class="high-scores">
              <h4>{{ getDifficultyName(aimDifficulty.value) }}难度排行榜</h4>
              <div class="score-list" v-if="highScores.length > 0">
                <div v-for="(item, index) in highScores" :key="index" class="score-item">
                  <span class="rank">{{ index + 1 }}</span>
                  <span class="player-name">{{ item.username }}</span>
                  <span class="player-score">{{ item.score }}</span>
                  <span class="score-date">{{ item.date }}</span>
                </div>
              </div>
              <div v-else class="no-scores">
                暂无分数记录，快来挑战吧！
              </div>
            </div>
          
          <button class="play-again-button" @click="startAimPractice">再玩一次</button>
          <button class="end-button" @click="backToMenu">结束游戏</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.games-container {
  min-height: 100vh;
  background: transparent;
  padding: 2rem;
  color: #fff;
  font-family: 'Arial', sans-serif;
  position: relative;
  z-index: 2;
}

.games-header {
  text-align: center;
  margin-bottom: 3rem;
}

.header-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.profile-button {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.profile-button:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.games-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome-message {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 游戏选择菜单 */
.games-menu {
  max-width: 900px;
  margin: 0 auto;
}

.game-selection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.game-option {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.game-option:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.game-option h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.game-option p {
  font-size: 1rem;
  opacity: 0.9;
}

/* 游戏屏幕通用样式 */
.game-screen {
  max-width: 1200px;
  margin: 0 auto;
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.game-header h2 {
  font-size: 2rem;
}

.game-info {
  display: flex;
  gap: 1rem;
}

.score-display {
  font-size: 1.5rem;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

.timer-display {
        font-size: 1.5rem;
        font-weight: bold;
        background-color: rgba(255, 107, 107, 0.2);
        padding: 0.5rem 1rem;
        border-radius: 6px;
      }
      
      /* 排行榜样式 */
      .high-scores {
        margin-top: 1.5rem;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 1rem;
        border-radius: 10px;
        width: 100%;
        max-width: 500px;
      }
      
      .high-scores h4 {
        color: #4ecdc4;
        margin-bottom: 1rem;
        text-align: center;
      }
      
      .score-list {
        max-height: 200px;
        overflow-y: auto;
      }
      
      .score-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem;
        margin-bottom: 0.3rem;
        background-color: rgba(255, 255, 255, 0.05);
        border-radius: 5px;
        font-size: 0.9rem;
      }
      
      .score-item:nth-child(odd) {
        background-color: rgba(255, 255, 255, 0.03);
      }
      
      .rank {
        font-weight: bold;
        color: #feca57;
        width: 25px;
      }
      
      .player-name {
        flex: 1;
        text-align: left;
        color: #ffffff;
      }
      
      .player-score {
        font-weight: bold;
        color: #4ecdc4;
        min-width: 40px;
        text-align: right;
      }
      
      .score-date {
        color: #aaa;
        font-size: 0.8rem;
        margin-left: 0.5rem;
      }
      
      /* 没有分数时的提示 */
      .no-scores {
        text-align: center;
        color: #aaa;
        font-style: italic;
        padding: 1rem;
      }

.back-button {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 游戏指令区域 */
.game-instructions {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 3rem;
  backdrop-filter: blur(10px);
}

/* 难度选择按钮 */
.difficulty-selection {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.difficulty-button {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.difficulty-button:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
}

.difficulty-button.ultimate {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  color: white;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.difficulty-button.ultimate:hover {
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.game-instructions h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.game-instructions p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.start-button {
  background-color: #4ecdc4;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  transition: all 0.3s ease;
}

.start-button:hover {
  background-color: #45b7aa;
  transform: scale(1.05);
}

/* 反应测试样式 */
.reaction-test-area {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.waiting-state {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 3rem;
  backdrop-filter: blur(10px);
}

.waiting-state h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.reaction-area {
  width: 100%;
  min-height: 400px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.reaction-area p {
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 游戏结果样式 */
.game-result {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 3rem;
  backdrop-filter: blur(10px);
}

.game-result h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.reaction-time, .final-score {
  font-size: 3rem;
  font-weight: bold;
  margin: 1.5rem 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.reaction-rating, .score-rating {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  font-weight: 500;
}

.play-again-button, .end-button {
  background-color: #4ecdc4;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  margin: 0 0.5rem;
  transition: all 0.3s ease;
}

.play-again-button:hover {
  background-color: #45b7aa;
  transform: scale(1.05);
}

.end-button {
  background-color: rgba(255, 255, 255, 0.2);
}

.end-button:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 瞄准练习样式 */
.aim-practice-area {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aiming-area {
  position: relative;
  width: 100%;
  min-height: 400px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
}

.ball {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  transform-origin: center;
  animation: pulse 2s infinite;
}

.ball:hover {
  transform: scale(1.1);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 自定义提示样式 */
.custom-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: slideIn 0.3s ease-out;
}

.alert-content {
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem;
  gap: 1rem;
}

.alert-icon {
  font-size: 2rem;
}

.alert-text {
  font-size: 1.2rem;
  color: #333;
  font-weight: 500;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .games-container {
    padding: 1rem;
  }
  
  .game-selection {
    grid-template-columns: 1fr;
  }
  
  .game-header {
    flex-direction: column;
    text-align: center;
  }
  
  .game-header h2 {
    font-size: 1.8rem;
  }
  
  .reaction-time, .final-score {
    font-size: 2rem;
  }
  
  .start-button, .play-again-button, .end-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
  
  .reaction-area {
    min-height: 300px;
  }
  
  .alert-text {
    font-size: 1rem;
  }
}
</style>